<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import { ArrowLeftBold } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

const router = useRouter();
const route = useRoute();
const id = ref(route.query.id);
const orderPayInfo = ref(null);
const order = ref(null);

const active = ref(0);

const changeActive = (index) => {
  active.value = index;
};
// 返回
const back = () => {
  router.back();
};

// 跳转页面
const jumpTo = (path) => {
  router.push(path);
};

const getOrderPayInfo = async (product) => {
  try {
    const res = await axios.get(`${apiUrl}/order/cashier/${id.value}/order`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });
    orderPayInfo.value = res.data.data;
  } catch (e) {}
};

const getOrderDetail = async () => {
  try {
    const res = await axios.get(`${apiUrl}/order/detail/${id.value}`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      order.value = res.data.data;
    }
  } catch (e) {}
};

const getPay = async () => {
  try {
    const res = await axios.post(
      `${apiUrl}/order/pay`,
      { uni: id.value, paytype: "yue", from: "pc" },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
          "Form-Type": "pc",
        },
      }
    );
    if (res.data.msg === "余额支付成功") {
      ElMessage({
        message: "支付成功，正在跳转到我的订单。",
        type: "success",
      });
      setTimeout(() => jumpTo("/person?tab=order"), 1000);
    } else {
      ElMessage({
        message: res.data.msg,
        type: "warning",
      });
    }
  } catch (e) {}
};

watch(
  () => route.query,
  async (newQuery, oldQuery) => {
    id.value = newQuery.id;
    getOrderPayInfo();
    getOrderDetail();
  },
  { deep: true, immediate: true }
);
onMounted(async () => {
  getOrderPayInfo();
  getOrderDetail();
});
</script>

<template>
  <div class="middle" v-if="orderPayInfo !== null && order !== null">
    <div class="backBox" @click="back">
      <el-icon class="icon"><ArrowLeftBold /></el-icon> {{ $t("order.back") }}
    </div>

    <div class="info">订单提交成功！快去付款吧～</div>

    <div class="orderInfo">
      <div class="item">订单编号：{{ id }}</div>
      <div class="item">订单价格：{{ orderPayInfo.pay_price }}元</div>
      <div class="item">收货信息：{{ order.user_address }}</div>
      <div class="item">
        商品名称：
        <span class="item" v-for="(item, index) in order.cartInfo" :key="index">
          {{ item.productInfo.store_name }}
        </span>
      </div>
    </div>

    <div class="title">选择支付方式</div>

    <div class="payType">
      <div class="payItem" :class="{ on: active == 0 }" @click="changeActive(0)">
        <div class="payIcon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="styles__StyledSVGIconPathComponent-sc-1sh3oaa-0 jWRKLz svg-icon-path-icon fill"
            viewBox="0 0 32 32"
            width="20"
            height="20"
          >
            <defs></defs>
            <g>
              <path
                fill="rgb(16, 16, 16)"
                d="M15.52 12.672v-0.64c0.002-2.049 1.663-3.71 3.712-3.712h9.088v-1.088c0-0.96-0.8-1.76-1.76-1.76h-22.816c-0.96 0-1.728 0.8-1.728 1.76v17.536c0 0.96 0.768 1.76 1.728 1.76h22.816c0.96 0 1.76-0.8 1.76-1.76v-8.384h-9.088c-2.049-0.002-3.71-1.663-3.712-3.712v-0zM28.704 9.216h-8.928c-1.6 0-2.88 1.312-2.88 2.912v0.48c0 1.6 1.28 2.88 2.88 2.88h8.928c0.704 0 1.312-0.576 1.312-1.312v-3.648c-0.015-0.718-0.594-1.297-1.311-1.312l-0.001-0zM20.256 13.888c-0.864 0-1.536-0.672-1.536-1.536s0.672-1.536 1.536-1.536c0.848 0 1.536 0.688 1.536 1.536s-0.688 1.536-1.536 1.536v0z"
              ></path>
            </g>
          </svg>
        </div>

        <div class="payName">余额支付</div>

        <svg class="vector1" v-if="active == 0" style="filter: none">
          <defs>
            <path
              id="TtTTvIjJUfwHbSXP9nxMmI"
              d="M 39 0 Q 39.5 17 40 34 Q 20 34 0 34 Q 19.5 17 39 0 Z"
            ></path>
            <clipPath id="clip-TtTTvIjJUfwHbSXP9nxMmI">
              <use xlink:href="#TtTTvIjJUfwHbSXP9nxMmI"></use>
            </clipPath>
          </defs>
          <g>
            <use
              xlink:href="#TtTTvIjJUfwHbSXP9nxMmI"
              clip-path="url(#clip-TtTTvIjJUfwHbSXP9nxMmI)"
              fill="rgba(16,16,16,1)"
              stroke="none"
              stroke-width="2"
              stroke-dasharray=""
            ></use>
          </g>
        </svg>
        <svg
          class="vector2"
          v-if="active == 0"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 32 32"
          width="24"
          height="24"
        >
          <defs></defs>
          <g>
            <path
              fill="rgb(255, 255, 255)"
              d="M13.28 22.912c-0.211 0.217-0.506 0.352-0.832 0.352-0.011 0-0.022-0-0.033-0l0.002 0c-0.288 0-0.576-0.096-0.832-0.352l-5.184-5.184 1.664-1.696 4.352 4.384 11.616-11.712 1.568 1.696-12.32 12.512z"
            ></path>
          </g>
        </svg>
      </div>

      <div class="payItem" :class="{ on: active == 1 }" @click="changeActive(1)">
        <div class="payIcon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="styles__StyledSVGIconPathComponent-sc-1sh3oaa-0 bSSfMv svg-icon-path-icon fill"
            viewBox="0 0 32 32"
            width="20"
            height="20"
          >
            <defs></defs>
            <g>
              <path
                fill="rgb(71, 186, 2)"
                d="M11.6 19.8c0 0.2-0.2 0.2-0.4 0.2-0.4 0-0.8-0.2-1-0.6v-0.2l-3-6.2v-0.2c0-0.2 0.2-0.6 0.6-0.6h0.4l3.4 2.4c0 0.2 0.4 0.4 0.8 0.4h0.6l16.2-7.2c-3-3.6-7.8-5.8-13.2-5.8-8.8 0-16 6-16 13.4 0 4 2.2 7.6 5.6 10 0.2 0.2 0.4 0.4 0.4 0.8v0.4c-0.2 1-0.6 2.6-0.8 2.6v0.4c0 0.2 0.2 0.6 0.6 0.6h0.4l3.6-2c0-0.2 0.2-0.4 0.6-0.4h0.4c1.6 0.4 3.4 0.8 5.2 0.8 8.8 0 16-6 16-13.4 0-2.2-0.6-4.4-1.8-6.2l-18.6 10.8z"
              ></path>
            </g>
          </svg>
        </div>

        <div class="payName">微信支付</div>
        <svg class="vector1" style="filter: none" v-if="active == 1">
          <defs>
            <path
              id="TtTTvIjJUfwHbSXP9nxMmI"
              d="M 39 0 Q 39.5 17 40 34 Q 20 34 0 34 Q 19.5 17 39 0 Z"
            ></path>
            <clipPath id="clip-TtTTvIjJUfwHbSXP9nxMmI">
              <use xlink:href="#TtTTvIjJUfwHbSXP9nxMmI"></use>
            </clipPath>
          </defs>
          <g>
            <use
              xlink:href="#TtTTvIjJUfwHbSXP9nxMmI"
              clip-path="url(#clip-TtTTvIjJUfwHbSXP9nxMmI)"
              fill="rgba(16,16,16,1)"
              stroke="none"
              stroke-width="2"
              stroke-dasharray=""
            ></use>
          </g>
        </svg>
        <svg
          class="vector2"
          xmlns="http://www.w3.org/2000/svg"
          v-if="active == 1"
          viewBox="0 0 32 32"
          width="24"
          height="24"
        >
          <defs></defs>
          <g>
            <path
              fill="rgb(255, 255, 255)"
              d="M13.28 22.912c-0.211 0.217-0.506 0.352-0.832 0.352-0.011 0-0.022-0-0.033-0l0.002 0c-0.288 0-0.576-0.096-0.832-0.352l-5.184-5.184 1.664-1.696 4.352 4.384 11.616-11.712 1.568 1.696-12.32 12.512z"
            ></path>
          </g>
        </svg>
      </div>
    </div>

    <el-button
      type="primary"
      @click="active === 0 ? getPay() : jumpTo('/wxPay?id=' + id)"
      style="width: 200px; margin-bottom: 40px; margin-left: 20px"
      >去支付</el-button
    >
  </div>
</template>

<style lang="scss" scoped>
.middle {
  .backBox {
    margin-top: 30px;
    margin-bottom: 20px;
    cursor: pointer;
    .icon {
      position: relative;
      top: 2px;
    }
  }

  .info {
    background-color: rgb(248, 248, 248);
    box-sizing: border-box;
    padding: 40px 30px;
    font-size: 16px;
  }

  .orderInfo {
    padding: 20px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    margin-bottom: 40px;
    .item {
      color: rgba(107, 107, 107, 1);
      font-size: 16px;
      line-height: 30px;
      margin-bottom: 10px;
    }
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    margin-left: 20px;
    margin-bottom: 30px;
  }
}

.payType {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(232, 232, 232, 1);
  .payItem {
    padding: 20px 40px;
    border: 1px solid rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 20px;
    margin-right: 20px;
    display: flex;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    .payName {
      font-size: 18px;
      margin-left: 10px;
    }

    .sel {
      position: absolute;
    }

    .vector1 {
      width: 40px;
      height: 34px;
      position: absolute;
      right: -1px;
      bottom: 0;
    }
    .vector2 {
      position: absolute;
      right: -1px;
      bottom: 0;
    }
  }
}
</style>
